<template>
    <view class="Wrapper">
        <navBar :title="title" borBot></navBar>

        <scroll-view
            scroll-y="true"
            enable-back-to-top
            class="scrollView"
            :style="scrollHeight"
            :lower-threshold="100"
            @scrolltolower="scrolltolower"
            @scroll="scroll"
            :scroll-into-view="scrollintoview">
            <view class="scrollViewBox">
                <template v-for="(item, index) in chatHomeList" :key="index">
                    <!-- ai -->
                    <view class="List Left" :id="`chat${index}`" v-if="item.state == 1">
                        <view class="HeadBox">
                            <image
                                :src="imgUrls(item.avatar || item.img)"
                                mode="aspectFill"
                                class="Headimgs"></image>
                            <view class="d-flex a-center p-top10" v-if="item.isshow">
                                <text class="tipTxt">静音</text>
                                <image
                                    :src="staticImg('icon_sound@2x.png')"
                                    mode="aspectFill"
                                    class="soundImg"></image>
                            </view>
                        </view>
                        <view
                            class="content"
                            v-if="item.type == 1 || item.type == 3 || item.type == 603">
                            <view class="content_text">
                                <view class="answer">
                                    {{ item.answer }}
                                </view>

                                <!-- 单选 -->
                                <template v-if="item.type == 1">
                                    <view
                                        class="single_choice"
                                        v-for="(sub, subIn) in item.recommend"
                                        :key="subIn"
                                        @click.stop="single_choice(item, sub, index)"
                                        >{{ sub.index }}.{{ sub.question }}
                                    </view>
                                </template>
                                <!-- 多选 -->
                                <view class="rows" v-if="item.type == 3">
                                    <up-checkbox-group
                                        v-model="checkboxValue1"
                                        placement="column"
                                        @change="checkboxChange">
                                        <view
                                            class="Multiple_choice"
                                            :class="{ Nochoice: !item.allowclick }"
                                            v-for="(sub, subIn) in item.recommend">
                                            <up-checkbox
                                                :customStyle="{ marginBottom: '8px' }"
                                                :key="subIn"
                                                size="14"
                                                labelSize="13"
                                                iconSize="10"
                                                :labelColor="mainStore.color"
                                                :label="`${sub.index}.${sub.question}`"
                                                :name="sub.question">
                                            </up-checkbox>
                                        </view>
                                    </up-checkbox-group>
                                    <view
                                        class="configBtn"
                                        :class="{ active: checkboxValue1.length }"
                                        v-if="item.allowclick"
                                        @click="configMultiple(item)"
                                        >确定</view
                                    >
                                </view>
                                <!-- 选择律师 -->
                                <view class="Findlawyer" v-if="item.type == 603">
                                    <block
                                        v-for="(sub, subIndex) in item.lawyers"
                                        :key="sub.userId">
                                        <view
                                            class="list"
                                            @click="item.selectUserId = sub.userId"
                                            :class="{ Active: item.selectUserId == sub.userId }">
                                            <image
                                                :src="imgUrls(sub.avatar)"
                                                mode="aspectFill"
                                                class="headImg"
                                                @click.stop="
                                                    toUrl(`/pages/counselors/details?id=${sub.id}`)
                                                "></image>
                                            <view class="content">
                                                <text class="Name">{{ sub.realName }}</text>
                                                <text class="desc">律师</text>
                                            </view>
                                            <view class="seleBox">
                                                <view class="iconfont icon-xuanzhong"></view>
                                            </view>
                                        </view>
                                    </block>
                                    <template v-if="!chatId">
                                        <view
                                            class="configBtn"
                                            :class="{ active: item.selectUserId }"
                                            @click="Choicelawyer(item)"
                                            v-if="!item.orgQuestion"
                                            >选择</view
                                        >
                                    </template>
                                </view>
                            </view>
                        </view>
                        <view class="content" v-else>
                            <view class="content_text bgFa">
                                <view class="answer">
                                    {{ item.answer }}
                                </view>
                            </view>
                            <!-- 跳转 -->
                            <view class="skip" v-if="item.type == 601" @click="skipUrl(item)">
                                <text class="nameTitle">{{ item.tourlDescription }}</text>
                                <view class="iconfont icon-xiangyou color-999 size44"></view>
                            </view>
                        </view>
                    </view>

                    <!-- 用户 -->
                    <view class="List Right" :id="`chat${index}`" v-if="item.state == 2">
                        <view class="content">
                            <view class="content_text">{{ item.question }}</view>
                            <view class="Edit_error" v-if="item.isshow">
                                <text class="discern">识别错误？</text>
                                <text class="Edit" @click.stop="Editpop(index)">修改</text>
                            </view>
                        </view>
                        <view class="HeadBox">
                            <image
                                :src="imgUrls(item.avatar || item.img)"
                                mode="aspectFill"
                                class="Headimgs"></image>
                        </view>
                    </view>
                </template>
                <view class="chatData" v-for="(item, index) in chatData" :key="index">
                    <view
                        class="TipChat"
                        v-if="item.state == 0 || item.messageType == 10"
                        :id="`chat${item.timestamp}${item.fromId}`"
                        >{{ item.content }}</view
                    >

                    <block v-else-if="item.fromId && item.fromId == 0">
                        <view
                            class="chatList chat_left"
                            :id="`chat${item.timestamp}${item.fromId}`"
                            v-if="
                                item.messageType == 5 &&
                                item.extend.userId == mainStore.userInfo.userId
                            ">
                            <image
                                :src="imgUrls(item.avatar)"
                                mode="aspectFill"
                                class="HeadImg"></image>
                            <view class="content signContract" @click="conclude(item)">
                                <view class="SignBox">
                                    <image
                                        :src="staticImg('J1.png')"
                                        mode="aspectFill"
                                        class="JIMG"></image>
                                    <view class="d-flex f-column">
                                        <text class="white size30">{{ item.content }}</text>
                                        <text class="white size24 m-top10">{{
                                            tampToDate(item.timestamp)
                                        }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view
                            class="chatList chat_left"
                            :id="`chat${item.timestamp}${item.fromId}`"
                            v-if="item.messageType == 11">
                            <image
                                :src="imgUrls(item.avatar)"
                                mode="aspectFill"
                                class="HeadImg"></image>
                            <view
                                class="content signContract Lookfile"
                                @click="previewFile(item.extend[0].url)">
                                <view class="SignBox">
                                    <image
                                        :src="staticImg('J1.png')"
                                        mode="aspectFill"
                                        class="JIMG"></image>
                                    <view class="d-flex f-column">
                                        <text class="white size30">{{ item.content }}</text>
                                        <text class="white size24 m-top10">{{
                                            tampToDate(item.timestamp)
                                        }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </block>

                    <block v-else>
                        <view
                            class="chatList chat_left"
                            :id="`chat${item.timestamp}${item.fromId}`"
                            v-if="item.fromId != mainStore.userInfo.userId">
                            <image
                                :src="imgUrls(item.avatar || item.img)"
                                mode="aspectFill"
                                class="HeadImg"></image>
                            <view class="content" v-if="item.messageType == 0">
                                <view class="Text">{{ item.content }}</view>
                            </view>
                            <view class="content" v-if="item.messageType == 1">
                                <image
                                    :src="imgUrls(item.extend.path)"
                                    show-menu-by-longpress
                                    mode="widthFix"
                                    class="Images"
                                    @click="previewImage(item.extend.path)"></image>
                            </view>
                            <view
                                class="content d-flex a-center"
                                v-if="item.messageType == 2"
                                @click="previewFile(item.extend.path)">
                                <image
                                    :src="staticImg(getFileExtension(item.content))"
                                    mode="aspectFill"
                                    class="fileImg"></image>
                                <text class="fileName">{{ item.extend.name }}</text>
                            </view>
                            <!-- <view
           				class="content signContract"
           				@click="conclude(item)"
           				v-if="item.messageType == 5">
           				<view class="SignBox">
           					<image
           						:src="staticImg('J1.png')"
           						mode="aspectFill"
           						class="JIMG"></image>
           					<view class="d-flex f-column">
           						<text class="white size30">签订合同</text>
           						<text class="white size24 m-top10">{{ item.extend.time }}</text>
           					</view>
           				</view>
           			</view> -->
                            <view
                                class="content signContract lawsuit"
                                @click="lawsuitBtn(item)"
                                v-if="item.messageType == 6">
                                <view class="SignBox">
                                    <image
                                        :src="staticImg('J2.png')"
                                        mode="aspectFill"
                                        class="JIMG"></image>
                                    <view class="d-flex f-column">
                                        <text class="white size30">{{
                                            item.content ? item.content : '确认结案'
                                        }}</text>
                                        <text class="white size24 m-top10">{{
                                            item.extend.time
                                        }}</text>
                                    </view>
                                </view>
                            </view>

                            <view
                                class="content TransferTbe"
                                :class="{ TransferNo: item.extend.status == 3 }"
                                v-if="item.messageType == 7">
                                <view
                                    class="SignBox"
                                    @click="
                                        Turndown(item.extend.id, item.id, item.extend.status, item)
                                    ">
                                    <view class="iconfont icon-zhuanzhanghuikuan"></view>
                                    <!-- <view class="iconfont icon-chenggong1"></view> -->

                                    <view class="d-flex f-column">
                                        <text class="white size36">￥{{ item.content }}</text>
                                        <text class="white size24 m-top10 ellipsis_1">{{
                                            item.extend.reason
                                                ? item.extend.reason
                                                : '你发起了一笔转账'
                                        }}</text>
                                    </view>
                                </view>
                            </view>

                            <!-- 认证 -->
                            <view
                                class="content TransferTbe attestation"
                                v-if="item.messageType == 8">
                                <view class="SignBox" @click="toAttest(item.fromId, item.extend)">
                                    <text class="white size30">{{ item.content }}</text>
                                </view>
                            </view>

                            <view
                                class="content TransferTbe TransferNo"
                                v-if="item.messageType == 9">
                                <view class="SignBox">
                                    <view class="iconfont icon-zhuanzhanghuikuan"></view>

                                    <view class="d-flex f-column">
                                        <text class="white size36">￥{{ item.content }}</text>
                                        <text class="white size24 m-top10 ellipsis_1">{{
                                            item.extend.reason
                                        }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view
                            class="chatList chat_right"
                            :id="`chat${item.timestamp}${item.fromId}`"
                            v-if="item.fromId == mainStore.userInfo.userId">
                            <view class="content" v-if="item.messageType == 0">
                                <view class="Text">{{ item.content }}</view>
                            </view>
                            <view class="content" v-if="item.messageType == 1">
                                <image
                                    :src="imgUrls(item.content)"
                                    show-menu-by-longpress
                                    mode="widthFix"
                                    class="Images"
                                    @click="previewImage(item.content)"></image>
                            </view>
                            <view
                                class="content d-flex a-center"
                                v-if="item.messageType == 2"
                                @click="previewFile(item.extend.path)">
                                <image
                                    :src="staticImg(getFileExtension(item.content))"
                                    mode="aspectFill"
                                    class="fileImg"></image>
                                <text class="fileName">{{ item.extend.name }}</text>
                            </view>
                            <!-- <view class="content signContract" v-if="item.messageType == 5">
           				<view class="SignBox">
           					<image
           						:src="staticImg('J1.png')"
           						mode="aspectFill"
           						class="JIMG"></image>
           					<view class="d-flex f-column">
           						<text class="white size30">签订合同</text>
           						<text class="white size24 m-top10">{{ item.extend.time }}</text>
           					</view>
           				</view>
           			</view> -->

                            <view
                                class="content signContract lawsuit"
                                @click="lawsuitBtn(item)"
                                v-if="item.messageType == 6">
                                <view class="SignBox">
                                    <image
                                        :src="staticImg('J2.png')"
                                        mode="aspectFill"
                                        class="JIMG"></image>
                                    <view class="d-flex f-column">
                                        <text class="white size30">{{ item.content }}</text>
                                        <text class="white size24 m-top10">{{
                                            item.extend.time
                                        }}</text>
                                    </view>
                                </view>
                            </view>

                            <view
                                class="content TransferTbe"
                                :class="{ TransferNo: item.extend.status == 3 }"
                                v-if="item.messageType == 7">
                                <view
                                    class="SignBox"
                                    @click="Turndown(item.extend.id, item.id, item.extend.status)">
                                    <view class="iconfont icon-zhuanzhanghuikuan"></view>
                                    <!-- <view class="iconfont icon-chenggong1"></view> -->

                                    <view class="d-flex f-column">
                                        <text class="white size36">￥{{ item.content }}</text>
                                        <text class="white size24 m-top10 ellipsis_1">{{
                                            item.extend.reason
                                                ? item.extend.reason
                                                : '你发起了一笔转账'
                                        }}</text>
                                    </view>
                                </view>
                            </view>

                            <!-- 认证 -->
                            <view
                                class="content TransferTbe attestation"
                                v-if="item.messageType == 8">
                                <view class="SignBox" @click="toAttest(item.fromId, item.extend)">
                                    <!-- <view class="iconfont icon-zhuanzhanghuikuan"></view> -->
                                    <!-- <view class="iconfont icon-chenggong1"></view> -->

                                    <text class="white size30">{{ item.content }}</text>
                                </view>
                            </view>

                            <view
                                class="content TransferTbe TransferNo"
                                v-if="item.messageType == 9">
                                <view class="SignBox">
                                    <view class="iconfont icon-zhuanzhanghuikuan"></view>
                                    <view class="d-flex f-column">
                                        <text class="white size36">￥{{ item.content }}</text>
                                        <text class="white size24 m-top10 ellipsis_1">{{
                                            item.extend.rejectReason
                                        }}</text>
                                    </view>
                                </view>
                            </view>

                            <image
                                :src="imgUrls(item.avatar || item.img)"
                                mode="aspectFill"
                                class="HeadImg"></image>
                        </view>
                    </block>
                </view>
            </view>
        </scroll-view>

        <view class="chatBox" :style="chatBoxStyle" ref="chatBoxRef">
            <view class="frameBox">
                <view class="Chatframe">
                    <input
                        type="text"
                        class="placeInput"
                        placeholder="请输入内容"
                        placeholder-class="place"
                        v-model="inputValue"
                        :adjust-position="false"
                        confirm-type="send"
                        @confirm="Send"
                        @focus="handFocus"
                        @blur="handleBlur" />

                    <template v-if="chatId || lawyerUserId">
                        <image
                            :src="staticImg('FS.png')"
                            mode="aspectFill"
                            @click="handleSend"
                            class="SendIcon"
                            v-if="conversion"></image>
                        <image
                            :src="staticImg('icon_im_add@2x.png')"
                            mode="aspectFill"
                            class="addIcon"
                            @click="handleToggle"
                            v-else></image>
                    </template>
                    <image
                        :src="staticImg('FS.png')"
                        mode="aspectFill"
                        @click="AihandleSend"
                        class="SendIcon"
                        v-else></image>
                </view>
            </view>
            <view class="Feature">
                <scroll-view scroll-x="true" class="rows nowrap">
                    <block v-for="(item, index) in FEATURE_ITEMS" :key="index">
                        <view class="list" v-if="item.mine">
                            <view class="listBox" @click="controlsList(item)">
                                <image :src="staticImg(item.icon)" class="Feats_Img"></image>
                                <text class="Feats_text">{{ item.text }}</text>
                                <button v-if="item.type == 'voice'" class="Btns"></button>
                            </view>
                        </view>
                    </block>
                </scroll-view>
            </view>
        </view>

        <up-popup :show="show" @close="Close" :round="15" closeable>
            <view class="Transfer">
                <text class="TranName">转账</text>
                <view class="TransBox">
                    <text class="size50 bold black">￥</text>
                    <input
                        type="digit"
                        class="TransInput"
                        v-model="amount"
                        placeholder="请输入转账金额" />
                </view>

                <input type="text" class="reasonText" v-model="reason" placeholder="备注" />

                <view class="TranBtn" @click="TranBtn">确定</view>
            </view>
        </up-popup>

        <up-popup :show="Refuse" @close="Refuse = false" :round="15" closeable>
            <view class="Transfer">
                <text class="TranName">拒绝</text>
                <textarea
                    class="refuseArea"
                    v-model="refuseReason"
                    placeholder="请输入拒绝原因"></textarea>
                <view class="RefuseBtn" @click="RefuseBtn">确定</view>
            </view>
        </up-popup>
    </view>
</template>

<script setup>
    import { ref, computed, watch, nextTick, onUnmounted } from 'vue';
    import { onLoad, onShow, onReady } from '@dcloudio/uni-app';
    import { useMainStore } from '@/stores/index';
    import { useToggle } from '@/utils/use.js';
    import { wssUrl } from '@/utils/config.js';
    import {
        toUrl,
        staticImg,
        imgUrls,
        Toast,
        chooseImage,
        uploadFile,
        previewImage,
        chooseMessageFile,
        getFileExtension,
        tampToDate,
        showLoading,
        hideLoading,
        previewFile,
    } from '@/utils/utils.js';
    import Http from '@/utils/request.js';
    import {
        uploadStreamFile,
        pactInit,
        getUserByOrderId,
        getOrderPactStatus,
    } from '@/utils/api.js';
    const mainStore = useMainStore();

    const title = ref('案件代理');
    const scrollintoview = ref('');
    const conversion = ref(false);
    const scrollTop = ref(0);
    const chatData = ref([]);

    const FEATURE_ITEMS = ref([
        { icon: 'c1.png', text: '图片', type: 'images', mine: true },
        { icon: 'c2.png', text: '语音通话', type: 'voice', mine: true },
        { icon: 'c3.png', text: '转账', type: 'transfer', mine: true },
        { icon: 'c4.png', text: '案卷', type: 'archives', mine: true },
        { icon: 'c5.png', text: '付款记录', type: 'paymentRecord', mine: true },
        { icon: 'c6.png', text: '发起签约', type: 'contract', mine: false },
        { icon: 'c7.png', text: '发起结案', type: 'lawsuit', mine: false },
        { icon: 'c8.png', text: '收款记录', type: 'collectionRecord', mine: false },
    ]);
    const chatBoxRef = ref(null);
    const chatBoxHeight = ref(0);
    const keyBoardHeight = ref(0);
    const inputValue = ref('');

    const lawyerUserId = ref(''); // 律师的userId
    const chatId = ref(''); // 订单id 6
    const daddressSelectorType = ref(); // 订单类型
    const type = ref(1);
    const messageType = ref(0); // 0 文本消息、1 图文消息 2 文件消息 3 语音消息 4 撤回消息 5 签订合同 6 确认结案 7 转账消息 8 认证
    let socketTask = null; // Add this at the top with other refs
    const show = ref(false);
    const amount = ref(); // 转账金额
    const reason = ref(''); // 转账备注

    const chatHomeList = ref([]); // ai对话
    const aichatId = ref('');
    const openInfo = ref('');

    const Refuse = ref(false);
    const refuseReason = ref('');
    const ferId = ref(); // 拒绝id
    const tranIdd = ref(); // 转账当前列表id

    const orderType = ref();
    const orderCode = ref('');
    const subItem = ref(0); // 首页 0 、 hr 1
    const current = ref(1);
    const gerMore = ref(true);
    const heartbeatTimeoutId = ref(null);
    const websot = ref(false);

    onLoad(async (opt) => {
        lawyerUserId.value = '';
        daddressSelectorType.value = '';
        if (opt.title) title.value = opt.title;
        if (opt.daddressSelectorType) daddressSelectorType.value = opt.daddressSelectorType;
        if (opt.orderType) daddressSelectorType.value = opt.orderType;
        if (opt.orderCode) orderCode.value = opt.orderCode;
        if (opt.subItem) subItem.value = opt.subItem;
        if (opt.userId && !opt.chatId) {
            lawyerUserId.value = opt.userId;
            add();
            return;
        }

        if (opt.chatId) {
            chatId.value = opt.chatId;
            mainStore.orderId = chatId.value;
        }
        if (subItem.value == 1) {
            inputValue.value = title.value;
            AihandleSend();
        }
    });
    onReady(() => {
        if (!FEATURE_ITEMS.value.length) return;
        FEATURE_ITEMS.value.forEach((item, index) => {
            if (mainStore.portType == 3) {
                FEATURE_ITEMS.value[2].mine = false;
                FEATURE_ITEMS.value[4].mine = false;
                FEATURE_ITEMS.value[5].mine = true;
                FEATURE_ITEMS.value[6].mine = true;
                FEATURE_ITEMS.value[7].mine = true;
            }
        });

        updateChatBoxHeight();

        // 预先注册键盘监听
        const handleKeyboardChange = (res) => {
            keyBoardHeight.value = res.height;
            nextTick(() => {
                updateChatBoxHeight();
                scrollToBottom();
            });
        };

        uni.offKeyboardHeightChange(handleKeyboardChange);
        uni.onKeyboardHeightChange(handleKeyboardChange);

        // 修改这里的初始化滚动逻辑
        nextTick(() => {
            // 等待DOM渲染完成
            setTimeout(() => {
                const query = uni.createSelectorQuery();
                query
                    .selectAll('.chatList')
                    .boundingClientRect((data) => {
                        if (data && data.length > 0) {
                            // 计算所有聊天内容的实际总高度
                            const totalHeight = data.reduce((sum, item) => sum + item.height, 0);
                            // 设置初始滚动位置
                            scrollTop.value = totalHeight + 1000;
                        }
                    })
                    .exec();
            }, 100);
        });
    });

    onShow(() => {
        if (chatId.value) Chat();
        let options = wx.getEnterOptionsSync();
        if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
            let extraData = options.referrerInfo.extraData;
            if (!extraData) return;
            if (extraData.code == 'success') {
                return;
            }
        }
    });

    const controlsList = async (Item) => {
        if (!chatId.value) return Toast('暂未选择律师');
        if (Item.type == 'images') return uploadImg();
        if (Item.type == 'paymentRecord') return toUrl(`payRecord?chatId=${chatId.value}`);
        if (Item.type == 'archives') return toUrl(`files?chatId=${chatId.value}`);
        if (Item.type == 'transfer') return (show.value = true);
        if (Item.type == 'collectionRecord') return toUrl(`collRecord?chatId=${chatId.value}`);
        if (Item.type == 'contract') {
            const fileResult = await chooseMessageFile();
            const isPdf = getFileExtension(fileResult.path);
            const Chaarr = isPdf.split('.');
            if (Chaarr[0] != 'pdf') return Toast('只能上传pdf文件');

            const uploadResult = await uploadStreamFile(fileResult); // 上传合同

            const signFiles = [
                {
                    pactFileId: uploadResult.resBody.pactFileId,
                },
            ];

            const pactInitResult = await pactInit(chatId.value, signFiles); // 发起合同
            if (!pactInitResult) return;
        }
        if (Item.type == 'lawsuit') {
            // 结案
            messageType.value = 6;
            sendContent({ time: tampToDate(new Date()) });
        }
        if (Item.type == 'voice') {
            uni.getSetting({
                success: (res) => {
                    if (!res.authSetting['scope.record']) {
                        uni.authorize({
                            scope: 'scope.record',
                            success: () => {
                                voiceContact();
                            },
                        });
                        if (res.authSetting['scope.record'] == false) {
                            uni.openSetting({
                                success(res) {
                                    console.log(res.authSetting);
                                },
                            });
                        }
                    } else {
                        voiceContact();
                    }
                },
            });
        }
    };

    const voiceContact = async () => {
        const openInfo = await getUserByOrderId(chatId.value);
        wx.setEnable1v1Chat({
            enable: true,
            success: () => {
                wx.join1v1Chat({
                    caller: {
                        nickname: mainStore.userInfo.loginName,
                        headImage: mainStore.userInfo.avatar,
                        openid: mainStore.openid,
                    },
                    listener: {
                        nickname: openInfo.userName,
                        headImage: openInfo.avatar,
                        openid: openInfo.openId,
                    },
                    roomType: 'voice',
                    success: (resVoice) => {
                        console.log('加入语音通话成功');
                    },
                    fail: (err) => {
                        Toast('加入语音通话失败');
                    },
                });
            },
            fail: (err) => {
                console.log(err, 'err');
                Toast('双人音频开启失败');
            },
        });
    };

    const uploadImg = async () => {
        const resultImg = await chooseImage();
        const savePath = await uploadFile(resultImg.path);
        resultImg.path = savePath;
        inputValue.value = savePath;
        messageType.value = 1;
        sendContent(resultImg);
    };
    const Chat = () => {
        // 如果已经存在连接且连接是开启状态，直接返回
        if (socketTask && socketTask.readyState === 1) {
            // console.log('WebSocket已连接');
            return;
        }

        // 确保有chatId
        if (!chatId.value) {
            // console.error('没有chatId，无法建立连接');
            return;
        }

        socketTask = uni.connectSocket({
            url: `wss://${wssUrl}/ws?chatId=${chatId.value}&token=${mainStore.token}`,
            header: {
                // 'content-type': 'application/json',
                token: mainStore.token,
            },
            success: (res) => {
                console.log(res, 'res');
            },
            fail: (err) => {
                console.log(err, 'err');
            },
            complete: () => {
                // console.log('WebSocket连接请求已发送');
            },
        });

        socketTask.onOpen(() => {
            websot.value = true;
            heartbeat();
            if (orderCode.value || (chatId.value && !chatData.length)) messagesPage();
        });

        socketTask.onMessage((res) => {
            try {
                let Result;

                // 尝试解析JSON，如果失败则作为普通文本处理
                try {
                    Result = JSON.parse(res.data);
                } catch {
                    // 如果解析失败，说明是普通文本消息
                    const Obj = {
                        content: res.data,
                        state: 0, // 使用state=0表示系统消息
                        timestamp: Date.now(),
                        fromId: Date.now(),
                    };
                    chatData.value.push(Obj);
                    // chatData.value.unshift(Obj);
                    console.log(chatData.value, 'chatData.value');

                    // nextTick(() => {
                    //     scrollToBottom();
                    // });
                    return; // 直接返回，不执行后续代码
                }

                // console.log(Result, 'Result');
                // 处理JSON格式的消息
                const Obj = {
                    code: Result.code,
                    state: 1,

                    ...Result.message,
                };
                const requetItem = Result.message;
                if (requetItem.messageType == 9 && requetItem.extend.status == 3) {
                    chatData.value.forEach((n) => {
                        if (n.extend && n.extend.id == requetItem.extend.id) n.extend.status = 3;
                    });
                }
                if (Result.code != 0) chatData.value.push(Obj);

                // chatData.value.pushunshift(Obj);
                // nextTick(() => {
                //     scrollToBottom();
                // });
                // console.log(chatData.value, 'chatData.value');
            } catch (error) {
                console.error('消息处理失败:', error);
            }
        });

        socketTask.onError((err) => {
            console.error('WebSocket错误:', err);
            Toast('连接错误');
        });

        socketTask.onClose(() => {
            console.log('WebSocket已关闭');
            socketTask = null;
        });
    };

    const handleSend = () => {
        if (!inputValue.value.trim()) return;

        // 确保连接是开启的
        if (!socketTask || socketTask.readyState !== 1) {
            // Toast('正在连接服务器...');
            Chat();
            return;
        }
        messageType.value = 0;
        sendContent();
        // Create message object
    };

    const sendContent = (extend = {}) => {
        if (!websot.value || !socketTask) return;
        const messageData = {
            code: 2,
            message: {
                name: mainStore.userInfo.userName,
                fromId: mainStore.userInfo.userId,
                chatId: chatId.value,
                type: type.value,
                messageType: messageType.value,
                content: inputValue.value,
                mine: true,
                state: 2,
                img: imgUrls(mainStore.userInfo.avatar),
                extend,
                timestamp: Date.now(),
            },
        };

        socketTask.send({
            data: JSON.stringify(messageData),
            success: () => {
                // console.log('消息发送成功');
                // chatData.value.unshift({ code: messageData.code, ...messageData.message });
                chatData.value.push({ code: messageData.code, ...messageData.message });
                console.log(chatData.value, 'chatData.value111');
                nextTick(() => {
                    scrollToBottom();
                });
                // 消息发送成功后会通过 onMessage 收到服务器的确认
                // 此时不需要手动添加消息到聊天列表
                inputValue.value = '';
                // scrollToBottom();
            },
            fail: (err) => {
                console.error('消息发送失败:', err);
                Toast('发送失败');
            },
        });
    };

    const updateChatBoxHeight = () => {
        const query = uni.createSelectorQuery();
        query
            .select('.chatBox')
            .boundingClientRect((data) => {
                if (data) chatBoxHeight.value = data.height;
            })
            .exec();
    };
    const handleToggle = async () => {
        const result = await chooseMessageFile();
        messageType.value = 2;
        const fileName = await uploadFile(result.path);
        inputValue.value = result.name;
        result.path = fileName;
        sendContent(result);
        setTimeout(() => {
            updateChatBoxHeight();
            scrollToBottom();
        }, 100);
    };
    const scroll = (event) => {
        // console.log(event);
    };
    const handFocus = () => {
        conversion.value = true;

        // 先获取键盘高度
        uni.getWindowInfo({
            success: (res) => {
                if (res.keyboardHeight) {
                    keyBoardHeight.value = res.keyboardHeight;
                }
            },
        });

        // 关闭功能面板并更新布局
        // showFeature.value = false;

        // 使用更长的延时等待功能面板完全收起和键盘弹出
        setTimeout(() => {
            updateChatBoxHeight();
            const query = uni.createSelectorQuery();
            query
                .selectAll('.chatList')
                .boundingClientRect((data) => {
                    if (data && data.length > 0) {
                        const totalHeight = data.reduce((sum, item) => sum + item.height, 0);
                        // 设置一个更大的值确保滚动到底部
                        scrollTop.value = totalHeight + 2000;
                    }
                })
                .exec();
        }, 300); // 增加延时时间
    };
    const handleBlur = () => {
        if (!inputValue.value) conversion.value = false;

        keyBoardHeight.value = 0;
        // 使用 setTimeout 确保键盘完全收起后再更新布局
        setTimeout(() => {
            updateChatBoxHeight();
            // 使用 selectAll 获取实际内容高度
            const query = uni.createSelectorQuery();
            query
                .selectAll('.chatList')
                .boundingClientRect((data) => {
                    if (data && data.length > 0) {
                        // 计算所有聊天内容的实际总高度
                        const totalHeight = data.reduce((sum, item) => sum + item.height, 0);
                        // 设置滚动位置为实际内容高度加上额外空间
                        scrollTop.value = totalHeight + 500;
                    }
                })
                .exec();
        }, 200); // 增加延时确保键盘完全收起
    };
    const scrollHeight = computed(() => {
        const Height =
            mainStore.windowHeight -
            mainStore.totalHeight -
            chatBoxHeight.value -
            keyBoardHeight.value;
        return ['height:' + Height + 'px'].join(';');
    });

    watch(
        () => inputValue,
        () => {
            conversion.value = inputValue.value ? true : false;
        },
        { deep: true }
    );

    // 转账
    const TranBtn = async () => {
        if (!amount.value) return;
        const openInfo = await getUserByOrderId(chatId.value);
        Http.post({
            url: '/pay/transfer',
            data: {
                formId: openInfo.userId,
                amount: amount.value,
                orderId: chatId.value,
                reason: reason.value,
            },
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            show.value = false;
            amount.value = '';
            reason.value = '';
            handFocus();
            const Result = res.data;
            if (Result.extraData) {
                wx.openEmbeddedMiniProgram({
                    appId: Result.appId,
                    extraData: Result.extraData,
                });
            }
        });
    };

    const scrollToBottom = () => {
        if (!chatData.value.length) return;
        // const Last = chatData.value[chatData.value.length - 1];
        const Last = chatData.value[0];
        console.log(Last, 'scrollToBottom');
        scrollintoview.value = `chat${Last.timestamp}${Last.fromId}`;
        // if (!Last.timestamp && chatData.value.length > 2) {
        //     const LastTwo = chatData.value[chatData.value.length - 2];
        //     scrollintoview.value = `chat${LastTwo.timestamp}${LastTwo.fromId}`;
        // } else {
        //     scrollintoview.value = `chat${Last.timestamp}${Last.fromId}`;
        // }
    };

    const chatBoxStyle = computed(() => {
        if (keyBoardHeight.value) {
            return {
                position: 'fixed',
                bottom: `${keyBoardHeight.value}px`,
                left: 0,
                right: 0,
                width: '100%',
                zIndex: 999,
                transform: 'translateZ(0)',
                backgroundColor: '#f4f5f5',
            };
        }
        return {
            paddingBottom: 'env(safe-area-inset-bottom)',
            width: '100%',
            backgroundColor: '#f4f5f5',
        };
    });

    const add = () => {
        Http.post({
            url: '/order/add',
            data: {
                lawyerUserId: lawyerUserId.value,
                orderType: daddressSelectorType.value,
                aiChatId: aichatId.value,
                subItem: subItem.value,
                orderCode: orderCode.value,
            },
        })
            .then((res) => {
                // 保存返回的chatId
                if (res.data && res.data.orderId) {
                    chatId.value = res.data.orderId;
                    mainStore.orderId = chatId.value;
                    getUserByOrderId(res.data.orderId).then((openInfo) => {
                        openInfo.value = openInfo;
                    });

                    // 建立WebSocket连接
                    Chat();
                } else {
                    Toast('创建聊天失败');
                }
            })
            .catch((err) => {
                console.error('创建聊天失败:', err);
                Toast('创建聊天失败');
            });
    };

    // 签订合同
    const conclude = async (item) => {
        const Result = await getOrderPactStatus(item.extend.orderPactId);
        if (Result == 1) return;
        mainStore.h5AuthUrl = item.extend.signUrl;
        toUrl(`webView?Type=2`);
    };

    // 确定结案
    const lawsuitBtn = (item) => {
        Http.post({
            url: `/order/confirmOrder?orderId=${chatId.value}`,
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            Toast(res.msg);
        });
    };

    const Send = () => {
        chatId.value ? handleSend() : AihandleSend();
    };
    const AihandleSend = () => {
        if (!inputValue.value.trim()) return;
        let ObjAi = {
            allowclick: true, // 是否点击
            isshow: false,
            state: 1,
            avatar: imgUrls(mainStore.BaseInfo.chatImg),
        };
        let Objme = {
            question: inputValue.value,
            isshow: false,
            state: 2,
            avatar: mainStore.userInfo.avatar,
        };
        if (inputValue.value) {
            chatHomeList.value.push(Objme);
            // nextTick(() => {
            //     scrollToBottom();
            // });
        }
        showLoading();
        Http.post({
            url: '/api/ai/findLawyerAskLargeModel',
            data: {
                question: inputValue.value,
                chatId: aichatId.value,
                chooseType: false,
            },
        }).then((res) => {
            hideLoading();
            if (res.code != 0) return Toast(res.msg);
            const result = res.data;
            aichatId.value = result.chatId || '';
            inputValue.value = '';

            // 找律师
            if (result.type == '603') {
                result.lawyers = JSON.parse(result.lawyers);
                result.answer = result.answer ? result.answer : '选择律师';
                result.selectUserId = '';
            }

            ObjAi = {
                ...ObjAi,
                ...result,
            };

            if (result.answer) chatHomeList.value.push(ObjAi);
        });
    };

    const configMultiple = (Item) => {
        console.log(Item, 'Item');
    };

    const findLawyerAskLargeModel = () => {
        showLoading('');
        Http.post({
            url: '/api/ai/findLawyerAskLargeModel',
            data: {
                question: inputValue.value,
                chooseType: false,
            },
        }).then((res) => {
            hideLoading();
            const result = res.data;
            chatHomeList.value = result;
        });
    };

    // 选择律师沟通
    const Choicelawyer = (Item) => {
        if (!Item.selectUserId || Item.orgQuestion) return;
        const ItemorderCode = Item.lawyers.find((n) => n.userId == Item.selectUserId);
        orderCode.value = ItemorderCode.orderCode;
        if (lawyerUserId.value) return Toast('已选择了律师');
        lawyerUserId.value = Item.selectUserId;
        daddressSelectorType.value = Item.daddressSelectorType;
        add();
    };

    // 获取聊天记录
    const messagesPage = () => {
        Http.get({
            url: '/api/sys/messages/page',
            data: {
                current: current.value,
                size: 50,
                chatId: chatId.value,
            },
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            const result = res.data.records || [];
            const oldResult = result.reverse();
            if (current.value == 1) {
                chatData.value = oldResult;
            } else {
                // chatData.value.push(oldResult);
                chatData.value = [...oldResult, ...chatData.value];
            }
            if (result.length < 50) gerMore.value = false;
        });
    };

    // 翻页
    const scrolltoupper = () => {
        console.log('1');
        //  @scrolltoupper="scrolltoupper"
        // if (!gerMore.value) return;
        // current.value++;
        // messagesPage();
    };

    const scrolltolower = () => {
        console.log('scrolltolower');
        if (!gerMore.value) return;
        current.value++;
        messagesPage();
    };

    // 拒绝转账 status 0-待处理 1-转账成功 2-转账失败 3拒绝
    const Turndown = (transferId, tranId, status, Item) => {
        console.log('1');
        if (status == 3) return;
        console.log('2');
        console.log(Item.fromId, Item.extend.lawyerUserId);
        if (Item.fromId != Item.extend.lawyerUserId) return;
        console.log('3');
        ferId.value = transferId;
        tranIdd.value = tranId;
        Refuse.value = true;
    };
    const RefuseBtn = () => {
        Http.post({
            url: '/pay/refuseTransfer',
            data: {
                transferId: ferId.value,
                refuseReason: refuseReason.value,
                imMessageId: tranIdd.value,
            },
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            const Current = chatData.value.findIndex((n) => n.id == tranIdd.value);
            chatData.value[Current].extend.status = 3;
            Refuse.value = false;
            refuseReason.value = '';
        });
    };

    // 去认证
    const toAttest = (fromId, extend) => {
        if (!extend) return;
        if (extend.isEnterprise) return Toast(extend.msg);
        if (fromId != mainStore.userInfo.userId) return;
        Http.get({
            url: '/api/tripartite/msca/queryPactStatus',
        }).then((res) => {
            if (res.code != 0) return Toast(res.msg);
            const result = res.data;
            if (!result) return toUrl(`personal`);
        });
    };

    const Close = () => {
        show.value = false;
        handFocus();
    };

    const heartbeat = () => {
        if (!websot.value || !socketTask) return;
        if (heartbeatTimeoutId.value) clearInterval(heartbeatTimeoutId.value);
        heartbeatTimeoutId.value = setInterval(() => {
            socketTask.send({
                data: JSON.stringify({
                    code: '0',
                    message: {
                        fromId: mainStore.userInfo.userId,
                        chatId: chatId.value,
                    },
                }),
                success: () => {
                    if (!websot.value || !socketTask) return;
                    console.log('消息发送成功');
                },
                fail: (err) => {
                    console.error('消息发送失败:', err);
                },
            });
        }, 30000);
    };
    // 更新onUnmounted，不要自动重连
    const closeWebSocket = () => {
        websot.value = false;

        if (heartbeatTimeoutId.value) {
            clearInterval(heartbeatTimeoutId.value);
            heartbeatTimeoutId.value = null;
        }

        if (socketTask) {
            try {
                // Remove all event listeners first
                socketTask.onClose(() => {});
                socketTask.onError(() => {});
                socketTask.onMessage(() => {});
                socketTask.onOpen(() => {});

                socketTask.close({
                    code: 1000,
                    reason: 'Component unmounted',
                    success: () => {
                        console.log('WebSocket closed successfully');
                        socketTask = null;
                    },
                    fail: (err) => {
                        console.error('Error closing WebSocket:', err);
                    },
                    complete: () => {
                        websot.value = false;
                        // Force close as backup
                        uni.closeSocket({
                            success: () => {
                                console.log('Forced WebSocket closure successful');
                            },
                        });
                        socketTask = null;
                    },
                });
            } catch (error) {
                console.error('Error during WebSocket cleanup:', error);
                // Force close as fallback
                uni.closeSocket();
                socketTask = null;
                websot.value = false;
            }
        }
    };

    // Update onUnmounted
    onUnmounted(() => {
        closeWebSocket();
    });
</script>

<style lang="scss" scoped>
    .Wrapper {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .scrollView {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 20rpx 0;
            -webkit-overflow-scrolling: touch;
            // border: 1px solid red;
            transform: rotate(180deg);

            .scrollViewBox {
                width: 100%;
                min-height: 100%;
                transform: rotate(180deg);
            }
            .chatData {
                width: 100%;
                transform: rotate(180deg);
            }
            // 开始ai
            .List {
                width: 100%;
                display: flex;
                padding: 20rpx 20rpx 0 20rpx;
                .content {
                    width: 100%;

                    .bgFa {
                        background-color: #fbfbfb !important;
                    }

                    &_text {
                        display: inline-block;
                        padding: 0 20rpx;
                        background-color: #ffffff;

                        font-size: 28rpx;
                        line-height: 40rpx;
                        margin-top: 20rpx;
                    }
                }

                .HeadBox {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .Headimgs {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 4rpx;
                        overflow: hidden;
                    }
                }
            }

            .Left {
                padding-right: 130rpx;
                justify-content: flex-start;

                .content_text {
                    border-radius: 0 20rpx 20rpx 20rpx;
                    border: 1rpx solid rgba(0, 0, 0, 0.1);
                    padding: 20rpx;
                    .answer {
                        color: #333;
                        font-size: 28rpx;
                    }

                    .single_choice {
                        width: 100%;
                        padding: 14rpx 20rpx;
                        color: $color_008;
                        font-size: 26rpx;
                        background-color: #f7f7f7;
                        margin-bottom: 16rpx;
                        border-radius: 6rpx;
                    }

                    .Multiple_choice {
                        width: 100%;
                        padding: 4rpx 20rpx;
                        color: $color_008;
                        font-size: 26rpx;
                        background-color: #f7f7f7;
                        margin-bottom: 14rpx;
                        border-radius: 6rpx;

                        ::v-deep .u-checkbox__icon-wrap {
                            flex-shrink: 0 !important;
                        }
                    }

                    .Nochoice {
                        ::v-deep .u-checkbox__icon-wrap {
                            display: none !important;
                        }
                    }

                    .configBtn {
                        width: 100%;
                        height: 70rpx;
                        background-color: #f7f7f7;
                        color: #999;
                        font-size: 30rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 10rpx;
                        margin-top: 20rpx;
                    }

                    .active {
                        background-color: $color_008 !important;
                        color: #fff !important;
                    }
                }

                .tipTxt {
                    color: #9a9ea2;
                    font-size: 20rpx;
                }

                .soundImg {
                    width: 28rpx;
                    height: 24rpx;
                    margin-left: 4rpx;
                }

                .content {
                    margin-left: 20rpx;
                }
            }

            // 跳转
            .skip {
                width: 80%;
                background-color: #fff;
                margin-top: 20rpx;
                display: flex;
                align-items: center;
                padding: 30rpx 24rpx;
                border-radius: 0 20rpx 20rpx 20rpx;

                .nameTitle {
                    color: #000;
                    font-size: 28rpx;
                    flex: 1;
                }
            }

            .Findlawyer {
                width: 100%;
                display: flex;
                flex-direction: column;
                padding-bottom: 20rpx;
                margin-top: 20rpx;
                .list {
                    width: 100%;
                    background-color: #f7f7f7;
                    padding: 16rpx 20rpx;
                    border-radius: 10rpx;
                    margin-bottom: 20rpx;
                    display: flex;
                    align-items: center;
                    .headImg {
                        width: 80rpx;
                        height: 80rpx;
                        border-radius: 50%;
                        margin-right: 14rpx;
                    }
                    .content {
                        width: 240rpx;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        .Name {
                            color: #000;
                            font-size: 30rpx;
                        }
                        .desc {
                            color: #9a9ea2;
                            font-size: 24rpx;
                            margin-left: 20rpx;
                        }
                    }
                    .seleBox {
                        width: 42rpx;
                        height: 42rpx;
                        border-radius: 50%;
                        border: 1px solid #e1e1e1;
                        margin-left: 10rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                        .icon-xuanzhong {
                            color: #f7f7f7;
                            font-size: 32rpx;
                        }
                    }
                }
                .Active {
                    .seleBox {
                        background-color: #13c643;
                        border: 1px solid #13c643;
                        .icon-xuanzhong {
                            color: #fff;
                        }
                    }
                }
            }

            .Right {
                padding-left: 130rpx;
                justify-content: flex-end;

                .content {
                    margin-right: 20rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;

                    .content_text {
                        color: #fff;
                        border-radius: 20rpx 0 20rpx 20rpx;
                        padding: 14rpx 20rpx;
                        background-color: v-bind('mainStore.color');
                    }

                    .Edit_error {
                        display: flex;
                        align-items: center;
                        padding-top: 10rpx;

                        .discern {
                            color: #9a9ea2;
                            font-size: 20rpx;
                        }

                        .Edit {
                            color: v-bind('mainStore.color');
                            font-size: 20rpx;
                        }
                    }
                }
            }

            // 结束ai

            .TipChat {
                width: 100%;
                display: flex;
                justify-content: center;
                padding: 40rpx 0 20rpx;
                color: #999;
                font-size: 22rpx;
                transform: rotate(180deg);
            }
            .chatList {
                display: flex;
                padding-top: 50rpx;
                transform: rotate(180deg);
                .HeadImg {
                    width: 84rpx;
                    height: 84rpx;
                    border-radius: 6rpx;
                    overflow: hidden;
                }
                .content {
                    flex: 1;

                    .Text {
                        max-width: 470rpx;
                        margin-top: 20rpx;
                        padding: 14rpx 20rpx;
                        display: inline-block;
                        border-radius: 0 20rpx 20rpx 20rpx;
                        font-size: 28rpx;
                    }
                    .Images {
                        max-width: 400rpx;
                        margin-top: 20rpx;
                        display: inline-block;
                    }
                    .fileImg {
                        width: 80rpx;
                        height: 80rpx;
                    }
                    .fileName {
                        color: #000;
                        font-size: 26rpx;
                        padding-left: 20rpx;
                    }
                }
                .signContract {
                    .SignBox {
                        width: 360rpx;
                        height: 130rpx;
                        border-radius: 0 20rpx 20rpx 20rpx;
                        background-color: #ff9900;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .JIMG {
                            width: 58rpx;
                            height: 58rpx;
                            margin-right: 30rpx;
                        }
                    }
                }
                .lawsuit {
                    .SignBox {
                        background-color: #31ca95;
                    }
                }
                .Lookfile {
                    .SignBox {
                        background-color: #eb2f3b !important;
                    }
                }

                .TransferTbe {
                    .SignBox {
                        width: 360rpx;
                        height: 130rpx;
                        display: flex;
                        align-items: center;
                        background-color: #f39d48;
                        border-radius: 0 20rpx 20rpx 20rpx;
                        padding-left: 20rpx;
                        .icon-zhuanzhanghuikuan {
                            color: #fff;
                            margin-right: 20rpx;
                            font-size: 70rpx;
                        }
                        .icon-chenggong1 {
                            color: #fff;
                            margin-right: 20rpx;
                            font-size: 70rpx;
                        }
                    }
                }
                .TransferNo {
                    .SignBox {
                        background-color: rgba(243, 157, 72, 0.5) !important;
                    }
                }
                .attestation {
                    .SignBox {
                        display: flex;
                        justify-content: center;
                        background-color: #1296f7 !important;
                    }
                }
            }
            .chat_left {
                padding-left: 20rpx;
                padding-right: 180rpx;
                .content {
                    margin-left: 20rpx;
                    .Text {
                        background-color: #fafafa;
                        border-radius: 0 20rpx 20rpx 20rpx;
                        color: #4f5357;
                    }
                }
                .signContract {
                    display: flex;
                    justify-content: flex-end;
                    flex-direction: column;
                }
            }
            .chat_right {
                padding-right: 20rpx;
                padding-left: 180rpx;
                .content {
                    margin-right: 20rpx;
                    display: flex;
                    justify-content: flex-end;
                    .Text {
                        background-color: v-bind('mainStore.color');
                        color: #fff;
                        border-radius: 20rpx 0 20rpx 20rpx;
                    }
                }
            }
        }
        .changeBg {
            background-color: #f4f5f5 !important;
        }
        .chatBox {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            border-top: 1rpx solid #f2f2f2;

            .frameBox {
                width: 100%;
                background-color: #ffffff;
                .Chatframe {
                    width: 708rpx;
                    height: 80rpx;
                    border: 1px solid #b8c5ff;
                    border-radius: 40rpx;
                    display: flex;
                    align-items: center;
                    margin: 24rpx auto 30rpx;
                    .addIcon {
                        width: 63rpx;
                        height: 63rpx;
                        padding: 0 20rpx;
                    }
                    .placeInput {
                        flex: 1;
                        height: 100%;
                        font-size: 28rpx;
                        color: #333;
                        padding-left: 30rpx;
                    }
                    .SendIcon {
                        width: 60rpx;
                        height: 60rpx;
                        padding: 0 20rpx;
                    }
                }
            }

            .Feature {
                width: 100%;
                height: 180rpx;
                background-color: #f4f5f5;
                display: flex;
                align-items: center;
                .list {
                    height: 180rpx;
                    display: inline-block;
                    margin-left: 84rpx;
                    .listBox {
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                        .Btns {
                            width: 100%;
                            height: 100%;
                            position: absolute;
                            top: 0;
                            left: 0;
                            z-index: 10;
                            background-color: transparent;
                            border: none;
                        }
                        .Btns::after {
                            border: none;
                        }
                        .Feats_Img {
                            width: 64rpx;
                            height: 64rpx;
                        }
                        .Feats_text {
                            font-size: 24rpx;
                            color: #333;
                            margin-top: 4rpx;
                        }
                    }
                }
                .list:last-child {
                    margin-right: 84rpx;
                }
            }
        }
        .Transfer {
            width: 100%;
            padding: 50rpx 20rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .TranName {
                color: #000;
                font-size: 36rpx;
                font-weight: bold;
            }
            .TransBox {
                width: 100%;
                margin-top: 50rpx;
                height: 88rpx;
                padding: 0 20rpx 10rpx 20rpx;
                border-bottom: 1rpx solid #f1f1f1;
                display: flex;
                align-items: center;
                .TransInput {
                    flex: 1;
                    height: 100%;
                    padding: 0 20rpx;
                    color: #000;
                    font-size: 34rpx;
                }
            }

            .reasonText {
                width: 100%;
                height: 88rpx;
                padding-left: 20rpx;
                border-bottom: 1rpx solid #f1f1f1;
                margin-top: 20rpx;
            }
            .TranBtn {
                width: 300rpx;
                height: 90rpx;
                background-color: $color_008;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30rpx;
                border-radius: 10rpx;
                margin-top: 70rpx;
            }
            .refuseArea {
                width: 100%;
                height: 260rpx;
                padding: 30rpx;
                border-radius: 10rpx;
                background-color: #f7f7f7;
                margin-top: 40rpx;
                font-size: 26rpx;
            }
            .RefuseBtn {
                width: 100%;
                height: 90rpx;
                background-color: $color_008;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #fff;
                font-size: 30rpx;
                border-radius: 10rpx;
                margin-top: 70rpx;
            }
        }
    }
</style>
